{% extends "base.html" %}
{% block content %}
    {% if files is none%}
        <h3 style="color: red">无此目录</h3>
    {% else %}
        <script type="text/javascript" src="{{ url_for('static', filename='js/sparkmd5.js') }}"></script>
        <ol class="breadcrumb">
        {% set pre = "/" %}
        {% set pathList = path.split('/') %}
        <li><a href="{{ url_for('index', path=pre) }}">Home</a></li>
        {% for dir in pathList if dir != ""%}
            <li><a href="{{ url_for('index', path=pre+dir) }}">{{ dir }}</a></li>
            {% set pre = pre + dir + "/" %}
        {% endfor %}
        </ol>

        <div class="btn-toolbar" role="toolbar" aria-label="Toolbar">
            <div class="btn-group" role="group" aria-label="Upload" id="upload-btn">
                <button class="btn btn-default" data-toggle="modal" data-target="#UploadNewFile"><span class="glyphicon-cloud-upload glyphicon"></span>&nbsp;&nbsp;上传文件</button>
            </div>
            <div class="btn-group" role="group" aria-label="New File & Folder">
                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#CreateNewFolder"><span class="glyphicon glyphicon-folder-open"></span>&nbsp;&nbsp;新建文件夹</button>
            </div>
        </div>

        <script type="text/javascript">
        $('#upload-btn').hover(function () {
            $(this).addClass("open")
        })
        </script>
        <div id="CreateNewFolder" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Create New Folder">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="CloseDialog">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="CloseDialog">新建文件夹</h4>
                    </div>
                    <div class="modal-body">
                        <div class="input-group">
                            <label class="input-group-addon">新建文件夹名</label>
                            <input type="text" class="form-control" id="newFolderName">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="newFolder('{{ path }}')">确定</button>
                    </div>
                </div>
            </div>
        </div>

        <div id="UploadNewFile" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Create New Folder">
            <form action="{{ url_for('upload', path=path) }}" method="post" enctype="multipart/form-data">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="CloseDialog">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title" id="CloseDialog"><span class="glyphicon glyphicon-cloud-upload"></span>&nbsp;&nbsp;上传文件</h4>
                        </div>
                        <div class="modal-body uploadModal">
                            <div class="input-group">
                                <label class="input-group-addon">上传: </label>
                                <input type="file" class="form-control" name="file" id="upload_file" onchange="calculateMD5()"/>
                            </div>
                            <br/>

                            <div class="input-group">
                                <label class="input-group-addon">保存在: </label>
                                <input type="text" class="form-control" name="saveto" value="{{ path }}" id="upload_saveto" readonly/>
                            </div>
                            <br/>

                            <div class="input-group">
                                <label class="input-group-addon">命名为: </label>
                                <input type="text" class="form-control" name="name" id="upload_name"/>
                            </div>
                            <br/>

                            <div class="input-group">
                                <label class="input-group-addon">MD5: </label>
                                <input type="text" class="form-control" name="md5" id="upload_md5" readonly/>
                                <label class="input-group-addon" id="md5status">等待选择文件</label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <input type="submit" class="btn btn-primary" value="确定" />
                        </div>
                    </div>
                </div>
            </form>
        </div>

        {% if files|length == 0 %}
            <h3 style="color: red">目录下无文件/文件夹</h3>
        {% else %}
            <table class="table table-hover table-responsive" style="margin-top: 20px">
                <tr>
                    <td>
                        文件/文件夹
                    </td>
                    <td>
                        操作
                    </td>
                    <td>
                        文件大小
                    </td>
                </tr>
                {% for file in files %}
                    <tr>
                        <td>
                        {% if not file[1] %}
                            <span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
                            &nbsp; &nbsp; <a href="{{ url_for('index', path=path+file[0]+'/') }}" class="filename">{{ file[0] }}</a>
                        {% else %}
                            <span class="glyphicon glyphicon-file" aria-hidden="true"></span>
                            &nbsp; &nbsp; <a href="{{ url_for('download', filename=file[0], hash=file[1]) }}" class="filename">{{ file[0] }}</a>
                            <span class="hide">{{ file[1] }}</span>
                        {% endif %}
                        </td>
                        <td>
                            <div class="btn-group" role="group">
                            <!-- Delete -->
                            {% if file[1] is not none %}{# FILE #}
                                <button type="button" class="btn btn-default" onclick="window.location='{{ url_for('delete', path=path, name=file[0]) }}'"><span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;删除</button>
                            {% else %}{# FOLDER  #}
                                <button type="button" class="btn btn-default" onclick="window.location='{{ url_for('delete', path=path, name=file[0] +'/') }}'"><span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;删除</button>
                            {% endif %}

                            <!-- Copy -->
                            {% if file[1] is not none %}{# FILE #}
                                <button type="button" class="btn btn-default" onclick="copyto('{{path + file[0] }}','{{ path }}')"><span class="glyphicon glyphicon-copy"></span>&nbsp;&nbsp;复制</button>
                            {% else %}{# FOLDER  #}
                                <button type="button" class="btn btn-default" onclick="copyto('{{path + file[0] + '/'}}','{{ path }}')"><span class="glyphicon glyphicon-copy"></span>&nbsp;&nbsp;复制</button>
                            {% endif %}

                            <!-- Move -->
                            {% if file[1] is not none %}{# FILE #}
                                <button type="button" class="btn btn-default" onclick="moveto('{{path + file[0]}}','{{ path }}')"><span class="glyphicon glyphicon-move"></span>&nbsp;&nbsp;移动</button>
                            {% else %}{# FOLDER #}
                                <button type="button" class="btn btn-default" onclick="moveto('{{path + file[0] + '/' }}','{{ path }}')"><span class="glyphicon glyphicon-move"></span>&nbsp;&nbsp;移动</button>
                            {% endif %}
                            </div>
                        </td>
                        <td>
                            {% if file[1] is not none %}
                                {{ file[2] }} Bytes
                            {% else %}
                                &nbsp;
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
            </table>
        {% endif %}
    {% endif %}
    <script type="text/javascript" src="{{ url_for('static', filename='js/index.js') }}"></script>
{% endblock %}
